<template>
    <div>
        <el-table :data="data.tableData" border style="width: 100%">
            <el-table-column :data="data.tableConfig.seletion" type="selection" width="39"></el-table-column>
            <template v-for="item in data.tableConfig.tableHead">
                <!-- 插槽 -->
                <el-table-column 
                    :key="item.field" 
                    v-if="item.columnType === 'slot'" 
                    :prop="item.field" 
                    :label="item.label"
                    :width="item.width"
                    :fixed="item.fixed">
                    <template slot-scope="scope">
                        <slot :name="item.slotName" :data="scope.row"></slot>
                    </template>
                </el-table-column>
                <!-- function -->
                <!-- <el-table-column 
                    :key="item.field" 
                    v-else-if="item.columnType === 'function'" 
                    :prop="item.field" 
                    :label="item.label"
                    :width="item.width"
                    :fixed="item.fixed">
                    <template slot-scope="scope">
                        <slot :name="item.slotName" :data="scope.row"></slot>
                    </template>
                </el-table-column> -->
                <!-- 文本数据渲染 -->
                <el-table-column 
                    :key="item.field" :prop="item.field" 
                    :label="item.label"
                    :width="item.width"
                    :fixed="item.fixed"
                    v-else>
            </el-table-column>
            </template>


            <!-- <el-table-column fixed="right" label="禁用权限" width="120">
                <el-switch v-model="switchValue" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, reactive ,ref, watch } from '@vue/composition-api';
// import { requestUrl } from "../../api/requestUrl";
// import { loadTableData } from "../../api/common";
export default {
    name: "tableIndex",
    props: {
        config: {
            type: Object,
            default: ()=>{}
        }
    },
    setup(props) {
        console.log(props.config, 'props.config1')

        // const switchValue = ref(true);
        const data = reactive({
            tableConfig: {
                tableHead:[],
                seletion: true,
                // recordCheckbox: false,
                // requestData: {
                //     url: "getUserList",
                //     method: "post",
                // },
            },
            tableData: [
            {
                username: '1234567890@qq.com',
                date: '2016-05-02',
                truename: '磊磊闲说之XX',
                phone: '13788888888',
                region: '上海市普陀区金沙江路磊磊闲说策划俱乐部1518号',
                role: '管理者',
            }, 
            {
                username: '123@qq.com',
                date: '2016-05-04',
                truename: '王小虎',
                phone: '13788888888',
                region: '上海市普陀区金沙江路磊磊闲说策划俱乐部1518号',
                role: '管理者',
            }
            ]
        })

        /**
         * 方法 mehtods
         */
        // const loadingData = (()=>{
        //     // console.log(data.tableConfig.requestUrl, 'data.tableConfig.requestUrl')
        //     // console.log(requestUrl[requestData.url], 'requestUrl[requestKey]')
        //     let requestData={
        //         url: requestUrl[requestData.url],
        //         method: requestData.method,
        //     }
        //     loadTableData().then(respose =>{

        //     }).catch(error =>{

        //     })
        // })
        // 初始化table配置项 // const声明对象或 数组
        // 匹配相同的key，如果存在，则替换
        // const initTableConfig = () => {
        //     let configData = props.config;
        //     // console.log(configData, 'configDataconfigData')
        //     // let keys = Object.keys(data.tableConfig);
        //     // console.log(keys, 'key1111')
        //     for(let key in configData) {
        //         console.log(key, 'key112222222')
        //         console.log(configData[2], 'configData222222222[key]configData[key]')
        //         // if(keys.includes(key)){  //  ["selection", "recordCheckbox", "requestUrl", "tHead"].includes("selection")
        //         //     data.tableConfig[key] = configData[key];
        //         // }

        //         data.tableConfig[key] = configData[key];
        //         // console.log(data.tableConfig, 'data.tableConfig')
        //     }
        // }

        const initTableConfig = () => {
            let configData = props.config;
            console.log(props.config, '1')
            console.log(configData, '2')
            // let keys = Object.keys(data.tableConfig);
            // console.log(data.tableConfig, '3')
            // console.log(keys, '4')
            for(let key in configData) {
                console.log(key, '5')
                console.log(configData[key], '55')
                data.tableConfig[key] = configData[key];
                console.log(data.tableConfig[key], '6')

                // if(keys.includes(key)){  //  ["selection", "recordCheckbox", "requestUrl", "tHead"].includes("selection")
                //     data.tableConfig[key] == configData.table_head;
                //     data.tableConfig[key] == configData.seletion;

                //     // data.tableConfig.tableHead = props.config.table_head;
                //     console.log(configData[key], '5')
                //     console.log(data.tableConfig[key], '6')
                //     console.log(data.tableConfig.seletion, '7')
                //     console.log(configData.seletion, '8')
                //     console.log(configData.table_head, '9')
                // }
            }
        }
        // const handleClick =((row)=> {
        //     console.log(row,"row");
        // })
        /* 
          生命周期3.0
        */
        watch(()=>{

        })
        onMounted(()=>{

        })
        onBeforeMount(()=>{
            initTableConfig();
            // loadingData();
            // data.tableConfig.tableHead = props.config.table_head;
            // console.log(data.tableConfig.tableHead, 'props.config2')
            // data.tableConfig.selettion = props.config.selettion
        })
        onBeforeUpdate(()=>{

        })
        onUpdated(()=>{

        })
        return {
            data
        }
    }
}
</script>

<style>

</style>